<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<head th:include="include :: header"></head>
</head>

	<body class="gray-bg">

		<div class="container-div">

			<div class="row">
				<div class="col-sm-12">
					<blockquote class="text-warning" style="font-size: 16px;">
						<h3>用户信息看板</h3> 功能完成中，如需完善或订正请联系 ERP:liuli31
					</blockquote>
				</div>
				<!--查询条件-->
				<div class="col-sm-12 search-collapse">
					<h4>查询条件</h4>
					<form id="user-form">
						<div class="select-list">
							<ul>
								<li>
									用户名称/C码/U码<span style="color:red;">*</span>：<input type="text" name="userCode" id="userCode" autocomplete="off" onblur="getUserProductCode()"/>
								</li>
								<li>
									产品编码<span style="color:red;">*</span>：<input type="text" name="productCode" id="productCode" disabled="disabled" onblur="getUserInfo()" autocomplete="off"  />
								</li>
								<li>
								<!--	<a class="btn btn-primary btn-rounded btn-sm" onclick="getUserInfo()"><i class="fa fa-search"></i>查询</a>-->
									<a class="btn btn-warning btn-rounded btn-sm" onclick="clearForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
								</li>
							</ul>
						</div>
					</form>
				</div>
				<!--产品查询结果-->
				<div class="col-sm-12 search-collapse" id ="productInfo" style="display: none">
					<div class="select-list">
						<ul>
							<li>
								<span id="products"></span>
							</li>
						</ul>
					</div>
				</div>
				<!--用户产品查询结果-->
				<div id ="userProductInfo" style="display: none">
					<span id="userInfo"> </span>
				</div>
				<!--end-->
			</div>
		</div>
		<div th:include="include :: footer"></div>
		<script>
			var prefix = ctx + "userWorkbenches"
			$("#user-form").validate({
				rules:{
					userCode:{
						required:true,
					}
				}
			});
			// 清空表单和页面数据
			function clearForm(){
				$.form.reset();
				$('#productCode').val("");
				$('#productInfo').hide();
				$('#userInfo').val("");
				$('#userProductInfo').hide();
			}
			//用户产品
           function getUserProductCode(){
			   console.log("获取产品信息......")
			   if ($.validate.form()) {
				   $.ajax({
					   type: "POST",
					   data: $('#user-form').serialize(),
					   url: prefix +'/getUserProductCode',
					   dataType: "json",
					   success: function(data) {
						   $('#productCode').val("");
						   $('#productInfo').show();
						   //查询产品是 清空用户产品信息
						   $('#userInfo').val("");
						   $('#userProductInfo').hide();
						 //  console.log("data=",data)
						   if (data.code == 500){
							   $("#productCode").attr('disabled','disabled');
							   $('#products').html("产品信息："+data.msg);
						   }else{
							   $("#productCode").removeAttr('disabled');
							   var info = "";
							   for (let i = 0; i < data.products.length; i++) {
								   info += data.products[i].productCode+"-"+data.products[i].productName +"【"+data.products[i].status+"】;  "
							   }
							  // console.log("info=",data)
							   $('#products').html("用户产品信息："+info);
							   if (data.products.length == 1){
								   $('#productCode').val(data.products[0].productCode);
								   getUserInfo();
							   }
						   }

					   }
				   });
			   }
		   }
		   //用户
		   function getUserInfo(){
			   if ($.validate.form()) {
				   if ( $('#productCode').val() == ""){
					   $.modal.alertError("请录入产品编码");
					   return false;
				   }
				   console.log("获取用户信息......")
				   $.ajax({
					   type: "POST",
					   data: $('#user-form').serialize(),
					   url: prefix +'/getUserProductInfo',
					   dataType: "json",
					   success: function(data) {
						   console.log("data=",data)
						   $('#userInfo').val("");
						   $('#userProductInfo').show();
						   if (data.code == 500){
							   $('#userInfo').html("产品信息："+data.msg);
						   }else{
							   $('#userInfo').html(data.userInfo);
						   }
					   }
				   });
			   }
		   }
		</script>
	</body>
</html>
